<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情 {{ article.title }}
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}


<div class="container">
	<a class="btn " href="{% url 'article:article_list' %}">MENU</a>
    <div class="row">
		<!-- 文章详情 -->
		<div class="col-9">
			<!-- 标题及作者 -->
			<h1 class="mt-4 mb-4">{{ article.title }}</h1>
			<!-- 标注 -->
			<div class="alert alert-success">
				<div class="mt-1">
					<i class="bi bi-outlet" style="color: red;"></i> 
						作者：{{ article.author }}&nbsp;					
					<i class="fas fa-clock" style="color: pink;"></i>
						更新于 {{ article.updated|date:'Y-m-d' }}&nbsp;
					<i class="bi bi-eye" style="color: blue;"></i> 
						阅览：{{ article.total_views }}&nbsp;					
					<i class="fas fa-comments" style="color: yellowgreen;"></i> 
						评论：{{ article.comments.count }}&nbsp;
				</div>
				{% if user == article.author %}
				<div class="mt-1">
					<a href="#" onclick="confirm_safe_delete()">
						<i class="bi bi-trash"></i> 删除文章
					</a>*
					<a href="{% url 'article:article_update' article.id %}">
						<i class="bi bi-vector-pen"></i> 编辑文章
					</a>
				</div>
				{% endif %}
	
				<!-- 新增一个隐藏的表单(删除文章) -->
				<form 
					  style="display:none;" 
					  id="safe_delete"
					  action="{% url 'article:article_safe_delete' article.id %}" 
					  method="POST"
					  >
					{% csrf_token %}
					<button type="submit">发送</button>
				</form>
			</div>
			<!-- 文章正文 -->
			<div class="col-12">
				<p>{{ article.body|safe }}</p>
			</div>			
			<!-- 发表评论 -->
			<hr>
			{% if user.is_authenticated %}
				<div>
					<form 
						action="{% url 'comment:post_comment' article.id %}" 
						method="POST"
					>
					{% csrf_token %}
						<div class="form-group">
							<label for="body">
								<strong>
									我也要发言：
								</strong>
							</label>
							<div>
								{{ comment_form.media }}
								{{ comment_form.body }}
							</div>
						</div>
						<!-- 提交按钮 -->
						<button type="submit" class="btn btn-primary ">发表评论</button>                    
					</form>
				</div>
				<br>
			{% else %}
				<br>
				<h5 class="row justify-content-center">
					请<a href="{% url 'userprofile:login' %}">登录</a>后回复
				</h5>
				<br>
			{% endif %}

			<!-- 显示评论 -->
			<h4>共有{{ comments.count }}条评论</h4>
			<div>
				{% for comment in comments %}
					<hr>
					<p>
						<strong style="color: pink">
							{{ comment.user }}
						</strong> 于 
						<span style="color: green">
							{{ comment.created|date:"Y-m-d H:i:s" }}
						</span> 时评论：
					</p>
					<div>{{ comment.body|safe }}</div>	
				{% endfor %}
			</div>
		</div>
		
		<!-- 目录 -->
		<div class="col-3 mt-4 sidebar" id="sidebar">
			<div class="sidebar__inner">
				<h4><strong>目录</strong></h4>
				<hr>
				<div>
					{{ toc|safe }}
				</div>
			</div>
		</div>
		
    </div>
</div>

<script>
    // 删除文章的函数
    function confirm_delete() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认删除",
            // 正文
            content: "确认删除这篇文章吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href='{% url "article:article_delete" article.id %}'
            },
        })
    }
	function confirm_safe_delete() {
		layer.open({
			title: "确认删除",
			content: "确认删除这篇文章吗？",
			yes: function(index, layero) {
				$('form#safe_delete button').click();
				layer.close(index);
			}
		})
	}
</script>

{% block script %}
<!-- 引入粘性侧边栏 -->
<script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
<script type="text/javascript">
    $('#sidebar').stickySidebar({
        topSpacing: 20,
        bottomSpacing: 20,
    });
</script>
<script>
    $(".django-ckeditor-widget").removeAttr('style');
</script>
{% endblock script %}

<!-- 粘性侧边栏样式 -->
<style>
    .sidebar{
        will-change: min-height;
    }

    .sidebar__inner{
        transform: translate(0, 0);
        transform: translate3d(0, 0, 0);
        will-change: position, transform;
    }
</style>

{% endblock content %}